<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <script type="text/babel">

            /* 
                1.初始化阶段:由ReactDOM.render()触发 --- 初次渲染
                                1.  constructor()   构造器
                                2.  componentWillMount()    组件将要挂载的钩子,但是还未渲染DOM时
                        (常用)  3.  render()
                        (常用)  4.  componentDidMount()      组件挂载完毕的钩子,组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染      一般在这个钩子中做一下初始化的事,例:/开启定时器/发送网络请求/订阅消息
                2.更新阶段:由组件内部this.setState()或父组件render触发
                                1.  componentWillReceiveProps()  组件将要接收参数,第一次传的值不算 ,父组件render之后才调.在接受父组件改变后的props需要重新渲染组件时用到的比较多
                                2.  shouldComponentUpdate()     控制组件更新的"阀门"(setState()).由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新  return true  或者  return false
                                3.  componentWillUpdate()       组件将要重新更新的钩子(forceUpdate()),shouldComponentUpdate返回true以后，组件进入重新渲染的流程
                        (常用)  4.  render()
                                5.  componentDidUpdate()        组件更新完毕的钩子,组件更新完毕后，react只会在第一次初始化成功会进入
                3.卸载组件:由ReactDOM.unmountComponentAtNode()触发
                        (常用)  1.  componentWillUnmount()      组件将要卸载的钩子,在此处完成组件的卸载和数据的销毁。一般在这个钩子做一下收尾的事,例:/关闭定时器/取消订阅消息
            
            
            */
            // 父组件
            class A extends React.Component{
                state = {carName:"奔驰"}
                changeCar = () =>{
                    const {carName} = this.state;
                    this.setState({carName:'宝马'})
                }
                render(){
                    return(
                        <div>
                            <h1>这是A组件(父组件)</h1>
                            <button onClick={this.changeCar}>换车</button>
                            <B carName={this.state.carName}/>
                        </div>
                    )
                }
            }
            // 子组件
            class B extends React.Component{
                // B组件只要挂载页面就调用
                componentDidMount(){
                    console.log('B---componentDidMount');
                }
                // 组件将要接收参数    第一次传的值不算 ,父组件render之后才调
                componentWillReceiveProps(props){
                    console.log('B---componentWillReceiveProps',props);
                }
                // 控制组件更新的"阀门"
                shouldComponentUpdate(){
                    console.log('B---shouldComponentUpdate');
                    return true;
                }
                // 组件将要重新更新的钩子
                componentWillUpdate(){
                    console.log('B---componentWillUpdate');
                }
                // 组件更新完毕的钩子 
                componentDidUpdate(){
                    console.log('B---componentDidUpdate');
                }
                render(){
                    console.log('B---render')
                    return(
                        <div>
                            <h1>这是B组件(子组件),接收到的车是:{this.props.carName}</h1>
                        </div>
                    )
                }
            }
            // 渲染组件
            ReactDOM.render(<A/>,document.getElementById('test'))
        </script>
    </body>
</html>